/*
 * @Author: Zeratul
 * @Date: 2020-08-19 17:40:46
 * @LastEditTime: 2020-08-21 16:55:53
 * @FilePath: \sz-h5-2003-react-mobile\zhangminhui\eleme-react\eleme-user\src\pages\OrderPage\index.js
 */
import React, { Component } from "react";
import styles from "./index.module.scss"
import { Tabs } from "antd-mobile";
import { connect } from "react-redux";
import NoOrder from "../../components/orderComponent/noOrder/NoOrder";
import { TabChangeAction } from "../../store/actionCreator/orderActionCreator";
import OrderItem from "../../components/orderComponent/OrderItem/OrderItem"
import { withRouter } from "react-router-dom";

class OrderPage extends Component {
  // totalPrice=(arr)=>{
  //   arr = arr.map(v=>{
  //     return v.price
  //   })
  //   let price = arr.reduce((p,v)=>{
  //     return p+v;
  //   })
  //   return "￥"+parseFloat(price,0);
  // }
  goToDetailPage=()=>{
    this.props.history.push('/orderdetail')
  }
  render() {
    return (
      <div className={styles.order}>
        <div className={styles.orderHeader}>
          <h3>订单</h3>
            <div className={styles.search}>
              <svg className={styles.icon} aria-hidden="true">
                  <use href="#icon-sousuo"></use>
              </svg>
            </div>
        </div>
        <div className={styles.orderContent}>
          <Tabs 
          tabs={this.props.tabs} 
          initialPage={0} 
          tabBarBackgroundColor="transparent"
          tabBarActiveTextColor="#000"
          tabBarUnderlineStyle={{ width: "50px",left:this.props.tabIndex*50}}
          onTabClick={this.props.tabIndexChange}
          >  
          <div style={{width:'100%',height:'100%'}} className={styles.orderConList}>
            {/* 订单内容开始 */}
            {this.props.allOrders.map(v=>{
              return <OrderItem 
              key={v.orderId}
              orderItem={v} 
              addClass={this.props.allOrders.length>0? "show":"hide"}
              goDetailPage = {
                ()=>{
                this.goToDetailPage()
              }
              }
              ></OrderItem>
            })}
            {/* 订单内容结束 */}
            <NoOrder addClass={this.props.allOrders.length>0? "hide":"show"}></NoOrder>
          </div>
          <div style={{width:'100%',height:'100%'}} className={styles.orderConList}>
            {/* 待付款内容开始 */}
            {this.props.obligation.map(v=>{
              return <OrderItem 
              key={v.orderId}
              orderItem={v} 
              addClass={this.props.allOrders.length>0? "show":"hide"}></OrderItem>
            })}
            {/* 待付款内容结束 */}
            <NoOrder addClass={this.props.obligation.length>0? "hide":"show"}></NoOrder>
          </div>
          <div style={{width:'100%',height:'100%'}} className={styles.orderConList}>
            {/* 待评论内容开始 */}
            {this.props.noEvaluation.map(v=>{
              return <OrderItem
              key={v.orderId}
              orderItem={v} 
              addClass={this.props.noEvaluation.length>0? "show":"hide"}></OrderItem>
            })}
            {/* 待评论内容结束 */}
          <NoOrder addClass={this.props.noEvaluation.length>0? "hide":"show"}></NoOrder>
          </div>
          <div style={{width:'100%',height:'100%'}} className={styles.orderConList}>
            {/* 退款订单内容开始 */}
            {this.props.noEvaluation.map(v=>{
              return <OrderItem 
              key={v.orderId}
              orderItem={v} 
              addClass={this.props.noEvaluation.length>0? "show":"hide"}></OrderItem>
            })}
            {/* 退款订单内容结束 */}
          <NoOrder addClass={this.props.refundList.length>0? "hide":"show"}></NoOrder>
          </div>
          </Tabs>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state)=>{
  return {
    tabs:state.orderReducer.tabs,
    allOrders:state.orderReducer.orderList,
    obligation:state.orderReducer.orderList.filter(v=>{
      return v.orderStatus === "待付款"
    }),
    noEvaluation:state.orderReducer.orderList.filter(v=>{
      return v.hasComment === true
    }),
    refundList:state.orderReducer.orderList.filter(v=>{
      return v.isrefund === true
    }),
    tabIndex:state.orderReducer.tabIndex
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    tabIndexChange:function(item){
      dispatch(TabChangeAction(item))
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(OrderPage));